<template>
  <div>
    <div class="container" ref="canvas">
    <div class="top">
      <div class="img">
        <el-image
        v-show="imgUrl1"
        style="width: 364px; height: 480px"
        :src="imgUrl1"
        :fit="fill"></el-image>
        <el-upload
        action="www.i6i8.cn"
          v-show="!imgUrl1"
          list-type="picture-card"
          :on-change="onchange"
          :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            图一
        </el-upload>

        <div class="left">
          <div class="top">
             <b class="xs"> {{time1 || time}}</b>
             <span class="xian"></span>
            <div class="rq">
              <div>{{rq||getNowFormatDate}}</div>
              <div>
                <span> 星期{{xq||getWeeks}}</span><span>{{tq}}</span><span>{{wendu}}°C</span>
              </div>
            </div>
          </div>
          <div class="bottom"> {{address}}</div>
        </div>
        <div class="right-watermark">
          <img class="watermark" :src="watermark1" alt="">
        </div>
      </div>
       <div class="img">
        <el-image
        v-show="imgUrl2"
        style="width: 364px; height: 480px"
        :src="imgUrl2"
        :fit="fill"></el-image>
        <el-upload
        action="www.i6i8.cn"
          v-show="!imgUrl2"
          list-type="picture-card"
          :on-change="onchange2"
          :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            图二
        </el-upload>

        <div class="left">
          <div class="top">
             <b class="xs"> {{time2 || time}}</b>
             <span class="xian"></span>
            <div class="rq">
              <div>{{rq||getNowFormatDate}}</div>
              <div>
                <span> 星期{{xq||getWeeks}}</span><span>{{tq}}</span><span>{{wendu}}°C</span>
              </div>
            </div>
          </div>
          <div class="bottom"> {{address}}</div>
        </div>
        <div class="right-watermark">
          <img class="watermark" :src="watermark2" alt="">
        </div>
      </div>
    </div>
    <div class="bottom">
       <div class="img">
        <el-image
        v-show="imgUrl3"
        style="width: 364px; height: 480px"
        :src="imgUrl3"
        :fit="fill"></el-image>
        <el-upload
        action="www.i6i8.cn"
          v-show="!imgUrl3"
          list-type="picture-card"
          :on-change="onchange3"
          :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            图三
        </el-upload>

        <div class="left">
          <div class="top">
             <b class="xs"> {{time3 || time}}</b>
             <span class="xian"></span>
            <div class="rq">
              <div>{{rq||getNowFormatDate}}</div>
              <div>
                <span> 星期{{xq||getWeeks}}</span><span>{{tq}}</span><span>{{wendu}}°C</span>
              </div>
            </div>
          </div>
          <div class="bottom"> {{address}}</div>
        </div>
        <div class="right-watermark">
          <img class="watermark" :src="watermark3" alt="">
        </div>
      </div>
       <div class="img">
        <el-image
        v-show="imgUrl4"
        style="width: 364px; height: 480px"
        :src="imgUrl4"
        :fit="fill"></el-image>
        <el-upload
        action="www.i6i8.cn"
          v-show="!imgUrl4"
          list-type="picture-card"
          :on-change="onchange4"
          :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            图四
        </el-upload>

        <div class="left">
          <div class="top">
             <b class="xs"> {{time4 || time}}</b>
             <span class="xian"></span>
            <div class="rq">
              <div>{{rq||getNowFormatDate}}</div>
              <div>
                <span> 星期{{xq||getWeeks}}</span><span>{{tq}}</span><span>{{wendu}}°C</span>
              </div>
            </div>
          </div>
          <div class="bottom"> {{address}}</div>
        </div>
        <div class="right-watermark">
          <img class="watermark" :src="watermark4" alt="">
        </div>
      </div>
    </div>
     <div class="bottom">
       <div class="img">
        <el-image
        v-show="imgUrl5"
        style="width: 364px; height: 480px"
        :src="imgUrl5"
        :fit="fill"></el-image>
        <el-upload
        action="www.i6i8.cn"
          v-show="!imgUrl5"
          list-type="picture-card"
          :on-change="onchange5"
          :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            图五
        </el-upload>

        <div class="left">
          <div class="top">
             <b class="xs"> {{time5 || time}}</b>
             <span class="xian"></span>
            <div class="rq">
              <div>{{rq||getNowFormatDate}}</div>
              <div>
                <span> 星期{{xq||getWeeks}}</span><span>{{tq}}</span><span>{{wendu}}°C</span>
              </div>
            </div>
          </div>
          <div class="bottom"> {{address}}</div>
        </div>
        <div class="right-watermark">
          <img class="watermark" :src="watermark5" alt="">
        </div>
      </div>
       <div class="img">
        <el-image
        v-show="imgUrl6"
        style="width: 364px; height: 480px"
        :src="imgUrl6"
        :fit="fill"></el-image>
        <el-upload
        action="www.i6i8.cn"
          v-show="!imgUrl6"
          list-type="picture-card"
          :on-change="onchange6"
          :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            图六
        </el-upload>

        <div class="left">
          <div class="top">
             <b class="xs"> {{time6 || time}}</b>
             <span class="xian"></span>
            <div class="rq">
              <div>{{rq||getNowFormatDate}}</div>
              <div>
                <span> 星期{{xq||getWeeks}}</span><span>{{tq}}</span><span>{{wendu}}°C</span>
              </div>
            </div>
          </div>
          <div class="bottom"> {{address}}</div>
        </div>
        <div class="right-watermark">
          <img class="watermark" :src="watermark6" alt="">
        </div>
      </div>
    </div>
    <div class="bottom" >
       <div class="img">
        <el-image
        v-show="imgUrl7"
        style="width: 364px; height: 480px"
        :src="imgUrl7"
        :fit="fill"></el-image>
        <el-upload
        action="www.i6i8.cn"
          v-show="!imgUrl7"
          list-type="picture-card"
          :on-change="onchange7"
          :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            图七
        </el-upload>

        <div class="left">
          <div class="top">
             <b class="xs"> {{time7 || time}}</b>
             <span class="xian"></span>
            <div class="rq">
              <div>{{rq||getNowFormatDate}}</div>
              <div>
                <span> 星期{{xq||getWeeks}}</span><span>{{tq}}</span><span>{{wendu}}°C</span>
              </div>
            </div>
          </div>
          <div class="bottom"> {{address}}</div>
        </div>
        <div class="right-watermark">
          <img class="watermark" :src="watermark7" alt="">
        </div>
      </div>
       <div class="img">
        <el-image
        v-show="imgUrl8"
        style="width: 364px; height: 480px"
        :src="imgUrl8"
        :fit="fill"></el-image>
        <el-upload
        action="www.i6i8.cn"
          v-show="!imgUrl8"
          list-type="picture-card"
          :on-change="onchange8"
          :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            图八
        </el-upload>

        <div class="left">
          <div class="top">
             <b class="xs"> {{time8 || time}}</b>
             <span class="xian"></span>
            <div class="rq">
              <div>{{rq||getNowFormatDate}}</div>
              <div>
                <span> 星期{{xq||getWeeks}}</span><span>{{tq}}</span><span>{{wendu}}°C</span>
              </div>
            </div>
          </div>
          <div class="bottom"> {{address}}</div>
        </div>
        <div class="right-watermark">
          <img class="watermark" :src="watermark8" alt="">
        </div>
      </div>
    </div>
  </div>
   <el-dialog
      title="请确认无误后 请按右键保存图片 或 复制图片发送到微信"
      :visible.sync="dialogVisible"
      width="760px"
      :before-close="handleClose">
      <span slot="footer" class="dialog-footer">
        <!-- <el-image  :src="toimg" :fit="fill"></el-image> -->
        <div ref="bc" v-if="removebc" class="bc"></div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import bus from '../bus.js'
export default {
  name: 'HelloWorld',
  data () {
    return {
      removebc: false,
      // toimg: '',
      dialogVisible: false,
      fill: '',
      address: '广州市 · 华侨城湖岸公馆',
      time: JSON.parse(localStorage.getItem('setting')).data.xs || '',
      time1: '', // 当前时间 20:00
      time2: '', // 当前时间 20:00
      time3: '', // 当前时间 20:00
      time4: '', // 当前时间 20:00
      time5: '', // 当前时间 20:00
      time6: '', // 当前时间 20:00
      time7: '', // 当前时间 20:00
      time8: '', // 当前时间 20:00
      tq: JSON.parse(localStorage.getItem('tq')).data.wea || '晴', // 天气情况 晴
      wendu: JSON.parse(localStorage.getItem('tq')).data.tem || '26', // 温度 28度
      xq: JSON.parse(localStorage.getItem('setting')).data.week || '', // 星期几 星期一
      rq: JSON.parse(localStorage.getItem('setting')).data.date || '', // 当前日期 2022-02-02
      disabled: false,
      imgUrl1: '', // 图片1
      imgUrl2: '', // 图片2
      imgUrl3: '', // 图片3
      imgUrl4: '', // 图片4
      imgUrl5: '', // 图片4
      imgUrl6: '', // 图片4
      imgUrl7: '', // 图片4
      imgUrl8: '', // 图片4
      watermark1: '',
      watermark2: '',
      watermark3: '',
      watermark4: '',
      watermark5: '',
      watermark6: '',
      watermark7: '',
      watermark8: ''
      // watermark1: require('@/assets/1.png'),
      // watermark2: require('@/assets/4.png'),
      // watermark3: require('@/assets/3.png'),
      // watermark4: require('@/assets/4.png')
    }
  },
  created () {
    this.okWatermark()

    bus.$on('success', (form) => {
      this.address = form.address
      this.time1 = form.time1
      this.time2 = form.time2
      this.time3 = form.time3
      this.time4 = form.time4
      this.time5 = form.time5
      this.time6 = form.time6
      this.time7 = form.time7
      this.time8 = form.time8
      this.tq = form.weather
      this.wendu = form.temperature
      this.xq = form.week
      this.rq = form.date
      setTimeout(() => {
        this.generatorImage()
      }, 100)
    })

    bus.$on('ResetPictureWatermark', () => {
      this.imgUrl1 = ''
      this.imgUrl2 = ''
      this.imgUrl3 = ''
      this.imgUrl4 = ''
      this.randomImg()
      this.okWatermark()
      // this.$message.success('已清空图片并刷新了防伪码')
    })
  },
  methods: {
    // 生成图片canvas
    generatorImage () {
      this.removebc = true
      html2canvas(this.$refs.canvas).then(canvas => {
        console.log(canvas)
        this.$refs.bc.append(canvas)
        this.dialogVisible = true
      })
    },
    handleClose (done) {
      done()
      this.removebc = false
    },
    onchange (file, fileList) {
      this.imgUrl1 = file.url
    },
    onchange2 (file, fileList) {
      this.imgUrl2 = file.url
    },
    onchange3 (file, fileList) {
      this.imgUrl3 = file.url
    },
    onchange4 (file, fileList) {
      this.imgUrl4 = file.url
    },
    onchange5 (file, fileList) {
      this.imgUrl5 = file.url
    },
    onchange6 (file, fileList) {
      this.imgUrl6 = file.url
    },
    onchange7 (file, fileList) {
      this.imgUrl7 = file.url
    },
    onchange8 (file, fileList) {
      this.imgUrl8 = file.url
    },
    // 是否水印重复
    isWatermark () {
      if (this.watermark1 === this.watermark2 || this.watermark1 === this.watermark3 || this.watermark1 === this.watermark4 || this.watermark1 === this.watermark5 || this.watermark1 === this.watermark6 || this.watermark1 === this.watermark7 || this.watermark1 === this.watermark8) {
        console.log('重复了水印1')
        this.randomImg()
        return true
      }
      if (this.watermark2 === this.watermark3 || this.watermark2 === this.watermark4 || this.watermark2 === this.watermark1 || this.watermark2 === this.watermark5 || this.watermark2 === this.watermark6 || this.watermark2 === this.watermark7 || this.watermark2 === this.watermark8) {
        console.log('重复了水印2')
        this.randomImg()
        return true
      }
      if (this.watermark3 === this.watermark4 || this.watermark3 === this.watermark2 || this.watermark3 === this.watermark1 || this.watermark3 === this.watermark5 || this.watermark3 === this.watermark6 || this.watermark3 === this.watermark7 || this.watermark3 === this.watermark8) {
        console.log('重复了水印3')
        this.randomImg()
        return true
      }
      if (this.watermark4 === this.watermark1 || this.watermark4 === this.watermark2 || this.watermark4 === this.watermark3 || this.watermark4 === this.watermark5 || this.watermark4 === this.watermark6 || this.watermark4 === this.watermark7 || this.watermark4 === this.watermark8) {
        console.log('重复了水印4')
        this.randomImg()
        return true
      }
      if (this.watermark5 === this.watermark1 || this.watermark5 === this.watermark2 || this.watermark5 === this.watermark3 || this.watermark5 === this.watermark4 || this.watermark5 === this.watermark6 || this.watermark5 === this.watermark7 || this.watermark5 === this.watermark8) {
        console.log('重复了水印5')
        this.randomImg()
        return true
      }
      if (this.watermark6 === this.watermark1 || this.watermark6 === this.watermark2 || this.watermark6 === this.watermark3 || this.watermark6 === this.watermark4 || this.watermark6 === this.watermark5 || this.watermark6 === this.watermark7 || this.watermark6 === this.watermark8) {
        console.log('重复了水印6')
        this.randomImg()
        return true
      }
      if (this.watermark7 === this.watermark1 || this.watermark7 === this.watermark2 || this.watermark7 === this.watermark3 || this.watermark7 === this.watermark4 || this.watermark7 === this.watermark5 || this.watermark7 === this.watermark6 || this.watermark7 === this.watermark8) {
        console.log('重复了水印7')
        this.randomImg()
        return true
      }
      if (this.watermark8 === this.watermark1 || this.watermark8 === this.watermark2 || this.watermark8 === this.watermark3 || this.watermark8 === this.watermark4 || this.watermark8 === this.watermark5 || this.watermark8 === this.watermark6 || this.watermark8 === this.watermark7) {
        console.log('重复了水印8')
        this.randomImg()
        return true
      }
      return false
    },
    // 随机生成水印
    randomImg () {
      var myPix = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
      var randomNum = Math.floor((Math.random() * myPix.length))
      var randomNum2 = Math.floor((Math.random() * myPix.length))
      var randomNum3 = Math.floor((Math.random() * myPix.length))
      var randomNum4 = Math.floor((Math.random() * myPix.length))
      var randomNum5 = Math.floor((Math.random() * myPix.length))
      var randomNum6 = Math.floor((Math.random() * myPix.length))
      var randomNum7 = Math.floor((Math.random() * myPix.length))
      var randomNum8 = Math.floor((Math.random() * myPix.length))
      this.watermark1 = require('@/assets/' + randomNum + '.png')
      this.watermark2 = require('@/assets/' + randomNum2 + '.png')
      this.watermark3 = require('@/assets/' + randomNum3 + '.png')
      this.watermark4 = require('@/assets/' + randomNum4 + '.png')
      this.watermark5 = require('@/assets/' + randomNum5 + '.png')
      this.watermark6 = require('@/assets/' + randomNum6 + '.png')
      this.watermark7 = require('@/assets/' + randomNum7 + '.png')
      this.watermark8 = require('@/assets/' + randomNum8 + '.png')
      console.log(randomNum)
      console.log(randomNum2)
      console.log(randomNum3)
      console.log(randomNum4)
      console.log(randomNum5)
      console.log(randomNum6)
      console.log(randomNum7)
      console.log(randomNum8)
    },
    // 调用递归
    okWatermark () {
      if (this.isWatermark()) {
        this.okWatermark()
        if (this.isWatermark()) {
          this.okWatermark()
          // if (!this.isWatermark()) {
          //   // return false
          // }
        }
      }
    }

  }
}
</script>

<style scoped lang="less">
/deep/.el-dialog {
    background:rgb(186, 207, 235);
    border-radius: 8px;
}
/deep/.el-dialog__body{
    padding: 0px;
  }
  /deep/.el-dialog__footer{
    padding: 0px;
  }
  .bc{
    text-align: center;
  }
.container{
  // width: 2000px;
  // height: 2644px;
  padding: 10px;
  width: 750px;
  // height: 980px;
  box-sizing: border-box;
  background-color:rgb(255, 255, 255);

}
.top,.bottom{
  display:flex;
}
.bottom{
  margin-top:5px
}
.img{
  position: relative;
  width: 363px;
  height: 480px;
  overflow: hidden;
  &:nth-child(2){
    margin-left:5px;
  }
  // 上传组件样式
 ::v-deep .el-upload--picture-card{
    position: absolute;
    background-color: #aabbcb;
    border: 1px dashed #227fea;
    border-radius: 0px;
    box-sizing: border-box;
    left: 0;
    width: 362px;
    height: 480px;
    cursor: pointer;
    line-height: 146px;
    vertical-align: top;
  }
  // +点击上传样式
  .el-upload--picture-card i {
    font-size: 53px;
    color: #ffffff;
    position: absolute;
    top: 220px;
    left: 155px;
}
  .left{
    position: absolute;
    // background-color:rgb(188, 171, 171);
    // height: 50px;
    bottom: 8px;
    left:6px;
    .top{
      box-sizing: border-box;
      // width: 200px;
      height: 35px;
      text-align: left;
      .xs{
        //  display: block;
        margin:0;
        padding: 0;
        line-height: 36px;
        font-size: 36px;
        // margin-right: 4px;
        font-weight: 400;
      }
      .xian{
        // margin-top: 10px;
        // padding-top: 10px;
        width: 2.5px;
        // height: 30px;
        // line-height: 39px;
        margin:2px 7px 3px 7px;
        background-color:#ffd438;
      }
      .rq{
        span{
          // letter-spacing:10px;
          margin-right: 6px;
        }
      }
    }
    color: rgb(255, 255, 255);
    .rq,.bottom{
      font-size: 12px;
      letter-spacing:0.5px;
    }
    .bottom{
      margin-top: 5px;
      // box-sizing: border-box;
    }

  }
  .right-watermark{
    position: absolute;
    // background-color:rgb(188, 171, 171);
    bottom: 2px;
    right:0px;
    font-size:12px;
    display:flex;
    flex-direction: column;
    align-items: center;
    // background-image: url(../assets/1.png) !important;
    div:nth-child(3){
      width: 52px;
      border-radius: 3px;
      font-weight: 700;
      color: #ffffff;
      opacity: 0.5;
      background-color: #f4eceb;
    }
    .watermark{
      width: 75px;
      // width: 80px;
    }
  }

}
</style>
